<template>
    <Modal :title="title" :value="show" @on-visible-change="setVisibility">
        <div class="margin-top-20" v-if="ticket">
            <Row :gutter="10" class="margin-bottom-20">
                <Col class="text-right" span="5">工单编号：</Col>
                <Col span="18">{{ticket.ticket_sn}}</Col>
            </Row>

            <Row :gutter="10" class="margin-bottom-20">
                <Col class="text-right" span="5">房源地址：</Col>
                <Col span="18">{{concatLocation(ticket.home_info)}}</Col>
            </Row>

            <Row :gutter="10" class="margin-bottom-20">
                <Col class="text-right" span="5">备注：</Col>
                <Col span="18">
                    <i-input :rows="3" type="textarea" v-model="description"></i-input>
                </Col>
            </Row>
        </div>
        <Row slot="footer">
            <Button @click="setVisibility(false)" type="text">取消</Button>
            <Button :loading="loading" @click="handleSubmit" type="primary">确定</Button>
        </Row>
    </Modal>
</template>

<script>
/**
 *  工单 - 验收
 */
import util from '@/libs/util'
import { http, api } from '@/libs/http'

export default {
  name: 'merchant-cancel-modal',
  props: {
    show: Boolean,
    ticket: Object,
    result: Boolean
  },
  data () {
    return {
      description: '',
      loading: false
    }
  },
  computed: {
    title () {
      return this.result ? '工单验收通过' : '工单验收驳回'
    }
  },
  watch: {
    show (n) {
      if (n) {
      } else {
        setTimeout(() => {
          this.$emit('update:ticket', null)
        }, 500)
      }
    }
  },
  methods: {
    concatLocation: util.concatAddress,
    setVisibility (val) {
      this.$emit('update:show', val)
    },
    handleSubmit () {
      const data = {
        ticket_id: this.ticket.id,
        description: this.description
        // pass: this.result
      }
      this.loading = true
      const finalApi = this.result ? api.ticket_check : api.ticket_turndown
      http.request(this, finalApi, [this.ticket.id], data, (res, err) => {
        this.loading = false
        if (err || !res) {
          this.$Message.error('验收失败, 请重试')
          return
        }
        if (this.result) {
          this.$Message.success('该工单成功通过验收')
        } else {
          this.$Message.success('该工单已重新处理')
        }
        this.$emit('refresh')
        this.setVisibility(false)
      })
    }
  }
}
</script>